<template>
  <div class="box_bg">
    <ScaleBox class="loginPage" :width="1024" :height="768" bgc="#00060f" :delay="100" :isFlat="false">
      <div>
        <div class="center_">
          <div class="nav_title">人工智能种植</div>
        </div>
        <div class="loginBox">
          <div class="ruleForm_">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item label="" prop="username">
                <el-input v-model="ruleForm.username" placeholder="请输入账号">
                  <i slot="prefix" class="icon"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off">
                  <i slot="prefix" class="icon"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-checkbox label="记住密码" name="type" v-model="ruleForm.type"></el-checkbox>
              </el-form-item>
              <el-form-item>
                <img src="../../assets/login.png" @click="submitForm('ruleForm')" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </ScaleBox>
  </div>
</template>
<script>
import md5 from 'js-md5'
import { login } from '@/api/system'
import ScaleBox from 'vue2-scale-box'

export default {
  components: {
    ScaleBox
  },
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        type: false
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      roleId: '',
      token: ''
    }
  },
  mounted() {
    if (token) {
      window.localStorage.setItem('token', res.data.token)
      setTimeout(() => {
        this.$router.push({
          path: `/home/home`
        })
      }, 200)
    }
    let username = window.localStorage.getItem('username')
    let password = window.localStorage.getItem('password')
    let type = window.localStorage.getItem('type')
    if (username && password) {
      this.ruleForm.username = username
      this.ruleForm.password = password
      this.ruleForm.type = type == 'true' ? true : false
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let password = md5(md5(this.ruleForm.password) + 'bby')
          login({
            password: password,
            username: this.ruleForm.username
          }).then(res => {
            if (this.ruleForm.type == true) {
              window.localStorage.setItem('password', this.ruleForm.password)
              window.localStorage.setItem('type', 'true')
            } else {
              window.localStorage.removeItem('password')
              window.localStorage.removeItem('type')
            }

            window.localStorage.setItem('username', this.ruleForm.username)
            window.localStorage.setItem('token', res.data.token)
            window.localStorage.setItem('roleId', res.data.roleId)
            this.roleId = res.data.roleId
            window.localStorage.setItem('userType', res.data.userType)
            window.localStorage.setItem('companyId', res.data.companyId)
            if (this.$route.query && this.$route.query.redirect) {
              this.$router.push({
                path: this.$route.query.redirect
              })
            } else {
              // this.$router.push({
              //   path: `/system/system/sysPlan`,
              // });
              // 获取用户权限

              this.$router.push({
                path: `/home/home`
              })
            }
          })
        }
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.box_bg {
  background-color: #000205 !important;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.ruleForm_ {
  display: flex;
  justify-content: center;
}
.title_ {
  display: flex;
  align-items: center;
  font-size: 25px;
  color: black;
  margin-right: 20px;
}
.title_img {
  margin-right: 15px;
}
.loginPage {
  background: url('../../assets/bg.png') no-repeat center center;
  // width: 100vw;
  height: 100vh;
  width: 100vw;
  // background-color: #05032e;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
}

.content {
  width: 800px;
  height: 364px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  width: 36%;
  height: 100%;
  background: #fff;
  line-height: 324px;
}

.logo img {
  width: 200px;
}

.loginBox {
  position: absolute;
  right: 270px;
  top: 208px;
  width: 474px;
  height: 400px;
  background-size: 100% 100% !important;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.logo-title {
  position: absolute;
  top: 140px;
  width: 650px;
  left: 260px;
  // margin-top: -150px;
}

.title {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
  opacity: 0.88;
  margin-top: 80px;
}

.demo-ruleForm {
  margin-top: 40px;

  .el-input {
    width: 308px;
    height: 40px;
    border-radius: 4px !important;
    color: white !important;
    background-color: #2439d0 !important;
  }
}

.icon {
  width: 22px;
  height: 22px;
  display: block;
  margin-top: 4.5px;
  margin-right: 4px;

  img {
    width: 100%;
    height: 100%;
  }
}

.btn {
  width: 350px;
  height: 50px;
  background: linear-gradient(180deg, #4ac6fa 0%, #017de2 100%);
  border-radius: 6px;
}
.btn:hover {
  background: linear-gradient(180deg, #12b0f3 0%, #024c88 100%);
}
.loginTitle {
  width: 336px;
  height: 30px;
  margin-top: 50px;
}
.center_ {
  display: flex;
  justify-content: center;
  .nav_title {
    font-family: 'MyCustomFont', sans-serif;
    display: flex;
    justify-content: center;
    // background: url('../assets/title.png') no-repeat center center;
    position: absolute;
    top: 20px;
    font-size: 42px;
    color: #ffffff;
    line-height: 58px;
    text-align: justify;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #0771ff 97%, #006dff 100%);
    -webkit-background-clip: text;
    color: transparent;

    .nav_t {
      font-weight: bolder;
      font-size: 34px;
      color: #3de6ff;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      background: linear-gradient(90deg, #ffffff 0%, #02c2cb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
@font-face {
  font-family: 'MyCustomFont'; /* 定义字体的名称 */
  src: url('../../assets/tt.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}
</style>
